<template>
  <view>
    <!-- 使用自定义的搜索组件,要把下面组件包起来 -->
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
   <!-- 1、轮毂图的区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(iteam,i) in swiperList" :key ='i'>
<!-- <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+ iteam.goods_id"> -->
      <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+ 47869">
          <image  :src="iteam.image_src"></image>
          
        </navigator>
      </swiper-item>    
    </swiper>
    
    <!-- 2、分类导航区域 -->
    <view class="nav-list">
      <view class="nav-iteam" v-for=" (iteam,i) in navList" :key='i'  @click="navClickHandler(iteam)">
        <image :src="iteam.image_src" class="nav-img"></image>
      </view>
    </view>
    <!-- 3、楼层区域 -->
    <view class="floor-list">
      <!-- 3.1楼层容器 -->
      <view class="floor-iteam" v-for="(item,i) in floorList " :key = 'i'>
        <!-- 3.1.1楼层标题 -->
        <image class="floor-title" :src="item.floor_title.image_src"></image>
        <!--3.2 楼层图片区域 -->
        <view class="floor-img-box">
        <!--3.2.1 左侧大图片的盒子 -->
        <navigator class="left-img-box" :url="splitUrl(item.product_list[0].navigator_url)">
          <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
        </navigator>
        <!--3.2.2 右侧四个小图片的盒子 -->
        <view class="right-img-box">
        <navigator class="right-img-item" v-for="(item2,i2) in item.product_list" :key='i2' v-if="i2 !== 0"  
        :url = "splitUrl(item2.navigator_url)">
          <image :src="item2.image_src" :style="{width: item2.image_width + 'rpx' }" mode="widthFix"></image>
        </navigator>
        </view>
        
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import  aa  from '@/data/home.js' 
  
  // 导入自己封装的 mixin 模块
  import badgeMix from '@/mixins/tabbar-badge.js'

  export default {
    // 将 badgeMix 混入到当前的页面中进行使用
      mixins: [badgeMix],
     data() {
       return {
         // 1. 轮播图的数据列表，默认为空数组
         swiperList: [],
         // 2. 分类导航的数据列表
          navList: [],
          // 3. 楼层的数据列表
                floorList: [],
       }
     },
     onLoad() {
       // 1. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
       this.getSwiperList()
       // 2. 分类导航的数据列表
       this.getNavList()
       // 3. 在 onLoad 中调用获取楼层数据的方法
           this.getFloorList()
     },
     methods: {
       // 1、获取轮播图数据的方法  ，async（异步）和await（等待）是调用接口的API进行promise化，减少回调函数的过程
       async getSwiperList() {
         // const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      const res = aa.data  //正常是用上面https接口获取数据，但接口没备案没办法用，只能把测试数据封装在自己写的json里面测试
        //  请求失败 uni.$showMsg()是一个封装的弹出信息方法方便其他地方调用
          if (res.meta.status !== 200) return uni.$showMsg()
         //请求成功，为 data 中的数据赋值
         this.swiperList = res.message
         
       },
       // 2. 分类导航的数据列表
       async getNavList() {
             // const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
             const res = aa.catitems
             if (res.meta.status !== 200) return uni.$showMsg()
             this.navList = res.message
           },
           // 2.1 分类导航通过绑定点击事件跳转到数据列表
           navClickHandler(iteam){
             if(iteam.name === '分类'){
               uni.switchTab({
                 url:'/pages/cate/cate'
               })
             }
           },
           // 3. 定义获取楼层列表数据的方法
          async getFloorList(){ 
             // const{ data:res } = await uni.$http.get('/api/public/v1/home/floordata')
           const res =  aa.floordata
                 if(res.meta.status != 200) return uni.$showMsg()
                 console.log(res)
                 this.floorList = res.message
             
           },
           //在搜索框跳转到搜索页面
           gotoSearch() {
             uni.navigateTo({
               url: '/subpkg/search/search'
             })
           },
           //由于从接口获取的url页面路径跟我工程的不一致，只能自己写个方法处理下，这样才能带着query跳转到商品列表
           splitUrl(str) {   
              const arr = str.split('=')
              const url= "/subpkg/goods_list/goods_list?query="+arr[1]
               return url
               }
           
     }
  }
</script>

<style lang="scss">
  //1、轮毂图样式
swiper {
  height:330rpx;
  .swiper-item,image
  {
    width: 100%;
    height: 100;
  }
}
  //2、分类样式
.nav-list {
      display: flex;
      justify-content: space-around ; //两端对齐，个项目两侧的间隔相等填满整个区域
      margin: 15rpx ;
    .nav-img{
      width: 128rpx;
      height: 140rpx;
    }
}
  //3、楼层样式
.floor-title{ //图标标题
       width: 100%;  //如果不是弹性flex布局就用 百分比，如果是弹性布局就用rpx
       height: 60rpx;   
     }
     
.right-img-box{ // 右侧盒子平铺而不是纵向
  display: flex;
  flex-wrap: wrap;   //规定灵活的项目在必要的时候拆行或拆列,如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。
  justify-content: space-around;
}
.floor-img-box{    //左右盒子里面图片的父节点，让子元素平铺再调整，不然是上下排列
  display: flex;
  padding-left: 10rpx;
}
  //通过如下的样式实现吸顶的效果，不然会跟着页面向下滑动被上面的轮播图遮盖  
.search-box {
     // 设置定位效果为“吸顶”
     position: sticky;
     // 吸顶的“位置”
     top: 0;
     // 提高层级，防止被轮播图覆盖
     z-index: 999;
   } 

</style>
